<template>
  <div class="shopcar">
    <ul>
      <li v-for="item in shopcar" :key="item.id">
        <img :src="item.src" alt="">
        <div>
          <p>{{item.title}}*{{item.num}}</p>
          <p>￥{{item.price}}</p>
          <p><button @click="del(item)">删除</button></p>
        </div>
      </li>
            
    </ul>
    <p v-if="shopcar.length">
      总价:{{totalPrice}}
    </p>
    <p v-else>购物车为空</p>
  </div>
</template>

<script>
// import { mapState,mapGetters } from 'vuex'
import { mapState,mapGetters} from 'vuex'
// @ is an alias to /src


export default {
  name: 'ShopCar',
  computed:{
    shopcar(){
      return this.$store.state.shopcar 
    },
    totalPrice(){
      return this.$store.getters.totalPrice
    }
  },
  // computed: {
  //   ...mapState(['shoplist']),
  //   ...mapGetters(['totalPrice']),

  // }
  methods:{
    del(item){
      this.$store.commit('del',item)
    }
  }
}
</script>
<style scoped>
.shopcar{
  width: 100%;
  padding-bottom: 50px;
}
li div{
  display: inline-block;
  position: absolute;
  top: 5px;
  width: 120px;
  line-height: 30px;
  font-size: 14px;
}
li{
  position: relative;
  border-bottom: 1px dashed #ccc;
}
img{
  width: 100px;
  border: 1px solid #ccc;
  margin: 10px 10px 8px 10px;
}
li div p:nth-child(2){
  color: #f00;
}
button{
  color: white;
  background: coral;
  border: none;
  padding: 5px;
}
</style>
